<template>
	<div class="call-recording-container">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="黑名单呼叫记录" name="callRecord">
				<SearchCallRecord @searchData="searchDataCallRecord" />
				<Table :tableData="tableData"> </Table>
				<PageSize :pages="searchData" @changePageSize="changecallRecordPageSize" @changeCurrentPage="changecallRecordCurrentPage" class="page" />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import SearchCallRecord from './SearchCallRecord.vue';
import Table from '@/views/components/Table.vue';
import PageSize from '@/views/components/PageSize.vue';
import { getBanUserSession } from '@/api/api';
export default {
	name: '',
	components: {
		SearchCallRecord,
		Table,
		PageSize
	},
	props: {},
	data() {
		return {
			activeName: 'callRecord',
			tableData: {
				sort: false,
				tableHead: [
					{
						label: '呼叫时间',
						prop: 'createdAt'
					},
					{
						label: 'SessionID',
						prop: 'sessionId'
					},
					{
						label: '用户ID',
						prop: 'userId'
					},
					{
						label: '黑名单分组',
						prop: 'banGroupName'
					},
					{
						label: '呼叫业务场景',
						prop: 'sceneName'
					}
				],
				tableConent: [],
				showIndex: false,
				showCheck: false
			},
			// 条件搜索
			searchData: {
				createdAtStart: '',
				createdAtEnd: '',
				sessionId: '',
				userId: '',
				banGroupName: '',
				sceneName: '',
				page: 1,
				pageSize: 10,
				total: 0
			}
		};
	},
	mounted() {
		this.initCallRecordList();
	},
	methods: {
		/**
		 * 检索
		 * @param {*} form
		 */
		searchDataCallRecord(form) {
			console.log('searchDataCallRecord', form);
			this.searchData.createdAtStart = form.createdAtStart;
			this.searchData.createdAtEnd = form.createdAtEnd;
			this.searchData.sessionId = form.sessionId;
			this.searchData.userId = encodeURIComponent(form.userId);
			this.searchData.banGroupName = encodeURIComponent(form.banGroupName);
			this.searchData.sceneName = form.sceneName;
			this.searchData.page = 1;
			this.searchData.pageSize = 10;
			this.initCallRecordList();
		},
		// 分页
		changecallRecordPageSize(val) {
			this.searchData.pageSize = val;
			this.searchData.page = 1;
			this.initCallRecordList();
		},
		changecallRecordCurrentPage(val) {
			this.searchData.page = val;
			this.initCallRecordList();
		},
		// 初始化黑名单呼叫记录
		async initCallRecordList() {
			try {
				const { data } = await getBanUserSession(this.searchData);
				console.log(data);
				this.tableData.tableConent = this.getInterfaceData(data.rows);
				this.searchData.total = data.count;
			} catch (error) {
				console.log(error);
				this.$message.error('获取黑名单呼叫记录列表失败！');
			}
		},
		// 处理接口返回的数据
		getInterfaceData(array) {
			return array.map(item => {
				return {
					createdAt: this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss'),
					sessionId: item.sessionId,
					callRejection: item.msg,
					id: item.id,
					banGroupName: item.banGroupName,
					sceneName: item?.bizscenario?.name,
					updateAt: this.$moment(item.updateAt).format('YYYY-MM-DD HH:mm:ss'),
					userId: item?.clients[0]?.userName
				};
			});
		}
	}
};
</script>

<style lang="less" scoped>
.call-recording-container {
	position: relative;
	.add-btn {
		width: 92px;
		height: 34px;
		background: #6384fe;
		border-radius: 4px;
		line-height: 3px;
		position: absolute;
		top: 42px;
		right: 20px;
		color: #fff;
	}
	.edit-btn {
		border-radius: 4px;
		color: #fff;
		background-color: #6384fe;
	}
	.delete-btn {
		border-radius: 4px;
		color: #fff;
		background-color: #ef5652;
	}
	.page {
		margin-top: 24px;
	}
}
</style>

<style lang="less">
.call-recording-container .el-tabs__active-bar {
	background-color: #6384fe !important;
}
.call-recording-container .el-tabs__item.is-active {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #6384fe !important;
}
.call-recording-container .el-table thead {
	color: #676a6c;
	tr {
		th {
			background-color: #f8f8f9;
		}
	}
}
.call-recording-container {
	.table {
		width: 80% !important;
		margin-top: 16px;
	}
}
</style>
